@component('backend::component.tpl_frame')
    @slot('icon') hcl-search @endslot
    @slot('class') mb-3 @endslot
    @slot('page_title') 筛选查询 @endslot
    @slot('tools_btn')
        @component('backend::component.form.button')
            @slot('title') 查询结果 @endslot
            @slot('class') btn-min-width @endslot
            @slot('color') outline-info @endslot
            @slot('attr') onclick=submitSearch(); @endslot
        @endcomponent
    @endslot
    @slot('body_content')
        <form class="form-inline" name="search" method="get" action="{{$search->searchAction ?? ''}}">
            @foreach($search->textSearch as $item)
                <div class="form-group my-1">
                    <label>{{$item['title']}}:</label>
                    @if($item['type'] == 'text')
                        <input type="text" name="{{$item['name']}}"  class="form-control mx-sm-2" value="{{$item['value']}}">
                    @elseif($item['type'] == 'time')
                        <div class="range-time" data-target="{{$item['name']}}">
                            <input type="text"  style="width: 150px;"  class="start-time form-control mx-sm-2"  />
                            <span>-</span>
                            <input type="text"  style="width: 150px;"  class="end-time form-control mx-sm-2"  />
                            <input type="hidden" name="{{$item['name']}}" value="{{$item['value']}}">
                        </div>
                    @else
                        <select class="form-control mx-sm-3" name="{{$item['name']}}">
                            @foreach($item['options'] as $option)
                                <option @if($item['value'] == $option['value'])selected @endif value="{{$option['value']}}">
                                    {{$option['title']}}
                                </option>
                            @endforeach
                        </select>
                    @endif
                </div>
            @endforeach
        </form>
    @endslot
@endcomponent
@push('scripts')
    <script>
        layui.use(['jquery', 'laydate'],function () {
            var laydate = layui.laydate,$ = layui.jquery;
            $('.range-time').each(function () {
                var target = $(this).data('target');
                var targetElem = $('input[name="'+target+'"]');
                var defaultVal = $('input[name="'+target+'"]').val();
                var startElem = $(this).children('input.start-time');

                var startTime = defaultVal.split('~')[0];
                var endTime = defaultVal.split('~')[1];
                laydate.render({
                    elem: startElem[0],
                    value:startTime,
                    done: function(value){
                        startTime = value;
                        if(endTime!=''&&endTime!=undefined){
                            targetElem.val(startTime+'~'+endTime);
                        }else{
                            targetElem.val(value);
                        }
                    }
                });
                var endElem = $(this).children('input.end-time');
                laydate.render({
                    elem: endElem[0],
                    value:endTime,
                    done: function(value){
                        endTime = value;
                        if(startTime&&startTime<=endTime){
                            targetElem.val(startTime+'~'+endTime);
                        }else{
                            targetElem.val(endTime+'~'+startTime);
                        }
                    }
                });
            });

        });
        
        function submitSearch() {
            var data = $("form[name='search']").serialize();
            var dataArray = data.split('&');
            var newData = []
            for (var index in dataArray){
                var item = dataArray[index];
                if(item.length > (item.indexOf('=')+1)){
                    if(item.split('=')[1] !=-100){
                        newData.push(item);
                    }
                }
            }
            var url = $("form[name='search']").attr('action');
            if(newData.length>=1){
                if(url.indexOf("?") >= 1){
                    url = url+"&"+newData.join('&');
                }else{
                    url = url+"?"+newData.join('&');
                }
            }
            window.location = url;
            return true;
        }
    </script>
@endpush